/******************************************************
 *** Javascript for chart control *********************
 ******************************************************/
// Global variables
var _ContainerChartControlId = "internalSkillsChart";
var _ChartControlId = "skillsChart";
var _ChartWidthRatio = 0.33;
var _MinimumChartWidth = 250;
var _ChartHeight = 305;

// Global functions
function SetChart(json) {
	// Get the json content
	var dictionary = jQuery.parseJSON(json);
	
	// Get a current mobile width value
	var currentChartWidth = ($("body").width() - (Math.round(_ChartWidthRatio * $("body").width())));	
		
	// Check the current device css
	if ((skel.canUse("mobile")) && (currentChartWidth > _MinimumChartWidth)) {
		// Create the chart container
		$("#" + _ContainerChartControlId).empty().append("<div id=\"" + _ChartControlId + "\" style=\"width: " + currentChartWidth + "px; height: " + _ChartHeight + "px; position: relative; left: 50%; margin-left: -" + currentChartWidth / 2 + "px;\"></div>");
		
		// Create a chart for mobile
		CreatePieChart(dictionary, currentChartWidth, _ChartHeight);
	} else if (!(skel.canUse("mobile"))) {
		// Create the chart container
		$("#" + _ContainerChartControlId).empty().append("<div id=\"" + _ChartControlId + "\" style=\"width: " + currentChartWidth + "px; height: " + _ChartHeight + "px; position: relative; left: 50%; margin-left: -" + currentChartWidth / 2 + "px;\"></div>");
		
		// Create a chart for desktop
		CreateChart(dictionary, currentChartWidth, _ChartHeight);		
	} else {
		// Empty the container
		$("#" + _ContainerChartControlId).empty();
	}
}

function CreatePieChart(dictionary, chartWidth, chartHeight) {	
	// Chart data source
	var dataSource = [
		{ skill: dictionary["chartValue0"], value: 10 },
		{ skill: dictionary["chartValue1"], value: 8 },
		{ skill: dictionary["chartValue2"], value: 9 },
		{ skill: dictionary["chartValue3"], value: 8 },
		{ skill: dictionary["chartValue4"], value: 8 },
		{ skill: dictionary["chartValue5"], value: 10 },
		{ skill: dictionary["chartValue6"], value: 8.5 },
		{ skill: dictionary["chartValue7"], value: 10 },
		{ skill: dictionary["chartValue8"], value: 9 },
		{ skill: dictionary["chartValue9"], value: 10 }
	];
	
	// Chart series
	var series = {
		argumentField: "skill",
		valueField: "value"
	};
	
	// Char options
	var chartOptions = {
		title: dictionary["chartTitle"],
		dataSource: dataSource,
		series: series,
		tooltip: {
			enabled: true
		},
		size: {
			width: chartWidth,
			height: chartHeight
		}
	};
	
	// Create the chart
	$("#" + _ChartControlId).dxPieChart(chartOptions);
}

function CreateChart(dictionary, chartWidth, chartHeight) {	
	// Chart data source
	var dataSource = [
        { skill: "", chartValue0: 10 },
		{ skill: "", chartValue1: 8 },
		{ skill: "", chartValue2: 9 },
		{ skill: "", chartValue3: 8 },
		{ skill: "", chartValue4: 8 },
		{ skill: "", chartValue5: 10 },
		{ skill: "", chartValue6: 8.5 },
		{ skill: "", chartValue7: 10 },
		{ skill: "", chartValue8: 9 },
		{ skill: "", chartValue9: 10 }
	];
	
	// Chart series
	var series = [
		{ valueField: "chartValue0", name: dictionary["chartValue0"] },
		{ valueField: "chartValue1", name: dictionary["chartValue1"] },
		{ valueField: "chartValue2", name: dictionary["chartValue2"] },
		{ valueField: "chartValue3", name: dictionary["chartValue3"] },
		{ valueField: "chartValue4", name: dictionary["chartValue4"] },
		{ valueField: "chartValue5", name: dictionary["chartValue5"] },
		{ valueField: "chartValue6", name: dictionary["chartValue6"] },
		{ valueField: "chartValue7", name: dictionary["chartValue7"] },
		{ valueField: "chartValue8", name: dictionary["chartValue8"] },
		{ valueField: "chartValue9", name: dictionary["chartValue9"] }
	];
	
	// Char options
	var chartOptions = {
		title: dictionary["chartTitle"],
		dataSource: dataSource,
		series: series,
		commonSeriesSettings: {
			argumentField: "skill",
			type: "bar",
			label: {
				visible: true,
				format: "fixedPoint",
				precision: 0
			}
		},
		size: {
			width: chartWidth,
			height: chartHeight
		}
	};	
	
	// Create the chart
	$("#" + _ChartControlId).dxChart(chartOptions);
}
